<template>
  <div class="sampleSeparation">
    <van-nav-bar
      :title="$route.meta.title"
      left-arrow
      :border="false"
      @click-left="clickLeft"
      @click-right="saveData"
      class="nav-bar"
    >
      <template #right>
        <van-icon name="success" size="24" />
        <span
          style="
            margin-left: 2px;
            color: #fff;
            margin-top: 3px;
            font-size: 20px;
          "
          >保存</span
        >
      </template>
    </van-nav-bar>
    <div class="item-style">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <van-tag plain type="primary" style="margin: 10px 10px 10px 20px"
          >基本信息</van-tag
        >
      </div>
      <van-row gutter="20" type="flex" align="center">
        <van-col span="12">
          <van-field
            v-model="checkType"
            name="checkType"
            label="检验类型"
            input-align="center"
            left-icon="scan"
            @click-left-icon="openScan()"
            class="deviceStyle"
          >
            <template #input>
              <fixed-select v-model="checkType" :dataList="checkTypeArr" />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            readonly
            clickable
            label="分样信息"
            v-model="sampleName"
            @click="showSamplePicker = true"
            placeholder="请选择"
            input-align="center"
          />
        </van-col>
        <van-col span="12">
          <van-field
            v-model="sampleAttributesName"
            name="sampleAttributesName"
            label="检验项目"
            input-align="center"
          >
            <template #input>
              <mult-select
                v-model="sampleAttributesName"
                :dataList="columns"
                @chooseValue="updataSampleAttributesName"
              />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-button
            size="mini"
            type="info"
            style="float: right; margin-right: 25px; padding: 0px 20px"
            @click="sampleHelp()"
            >分样帮助</van-button
          >
          <van-button
            size="mini"
            type="info"
            style="float: right; margin-right: 20px; padding: 0px 20px"
            @click="confirmReceipt()"
            v-if="showAcceptBtn"
            >请验单接收</van-button
          >
          <van-button
            size="mini"
            type="info"
            style="float: right; margin-right: 20px; padding: 0px 20px"
            @click.stop="checkPdfForm()"
            >请验单预览</van-button
          >
        </van-col>
      </van-row>

      <div
        style="display: flex; justify-content: space-between; margin-top: 20px"
      >
        <van-tag plain type="primary" style="margin: 10px 10px 10px 20px"
          >检验</van-tag
        >
        <div>
          <van-button
            size="mini"
            type="info"
            style="
              float: right;
              margin-right: 25px;
              margin-top: 10px;
              padding: 0px 20px;
            "
            @click="addCheckData()"
            >添加</van-button
          >
        </div>
      </div>
      <van-row>
        <van-col span="12">
          <van-field
            v-model="ClassCode"
            name="ClassCode"
            label="班组"
            input-align="center"
            required
          >
            <template #input>
              <select-two
                v-model="ClassCode"
                :dataList="classArr"
                @change="getClassName"
              />
            </template>
          </van-field>
        </van-col>
        <van-col span="7" style="width: 31%">
          <van-field
            v-model="WeightTotalOne"
            name="WeightTotalOne"
            label="数量"
            input-align="center"
            required
          >
          </van-field>
        </van-col>
        <van-col span="5" style="width: 19%">
          <van-field
            v-model="WeightUnitOneCode"
            name="WeightUnitOneCode"
            placeholder="请选择"
          >
            <template #input>
              <picker-unit-one
                v-model="WeightUnitOneCode"
                @change="getWeightUnitName"
              />
            </template>
          </van-field>
        </van-col>
      </van-row>
      <div style="padding: 0 20px; margin: 20px 0">
        <table class="tb">
          <tr>
            <th>班组</th>
            <th>数量</th>
            <th>单位</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in checkList" :key="index">
            <td>{{ item.ClassName }}</td>
            <td>{{ item.WeightTotalOne }}</td>
            <td>{{ item.WeightUnitOneName }}</td>
            <td>
              <button @click="delData(index)">删除</button>
            </td>
          </tr>
        </table>
      </div>
      <div
        style="display: flex; justify-content: space-between; margin-top: 20px"
      >
        <van-tag plain type="primary" style="margin: 10px 10px 10px 20px"
          >留样</van-tag
        >
        <div>
          <van-button
            size="mini"
            type="info"
            style="
              float: right;
              margin-right: 25px;
              margin-top: 10px;
              padding: 0px 20px;
            "
            @click="addSampleData()"
            >添加</van-button
          >
        </div>
      </div>
      <van-row>
        <van-col span="7" style="width: 31%">
          <van-field
            v-model="WeightTotalOne1"
            name="WeightTotalOne1"
            label="数量"
            input-align="center"
            required
          >
          </van-field>
        </van-col>
        <van-col span="5" style="width: 19%">
          <van-field
            v-model="WeightUnitOneCode1"
            name="WeightUnitOneCode1"
            placeholder="请选择"
          >
            <template #input>
              <picker-unit-one
                v-model="WeightUnitOneCode1"
                @change="getWeightUnitName1"
              />
            </template>
          </van-field>
        </van-col>
      </van-row>
      <div style="padding: 0 20px; margin: 20px 0">
        <table class="tb">
          <tr>
            <th>数量</th>
            <th>单位</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in sampleList" :key="index">
            <td>{{ item.WeightTotalOne }}</td>
            <td>{{ item.WeightUnitOneName }}</td>
            <td>
              <button @click="delData1(index)">删除</button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <van-popup
      v-model="showSamplePicker"
      position="bottom"
      :style="{ height: '50%' }"
      :lock-scroll="false"
    >
      <van-cascader
        v-model="sampleValue"
        :options="sampleArr"
        @close="showSamplePicker = false"
        @finish="onSampleFinish"
        :field-names="sampleNames"
      />
    </van-popup>
    <van-popup
      v-model="showPdf"
      safe-area-inset-bottom
      get-container="body"
      position="left"
      style="width: 50vw; height: 100%"
    >
      <div class="popup-content">
				<HPDFViewer :path="pdfUrl" />
      </div>
    </van-popup>
    <div class="scan" v-if="scanShow">
      <div id="bcid">
        <div style="height: 40%"></div>
        <p class="tip">...载入中...</p>
      </div>
      <footer>
        <button @click="closeModel">退出</button>
      </footer>
    </div>
  </div>
</template>

<script>
import {
  NavBar,
  Cell,
  CellGroup,
  Notify,
  Col,
  Row,
  Icon,
  Tag,
  Button,
  Field,
  Picker,
  Cascader,
  Popup,
} from "vant";
import { getUsercode } from "@/utils/auth";
import HPDFViewer from "@/components/HPDFViewer";
import {
  getReportId,
  getTestDataByTestId,
  getInfoTree,
  getDictionaryTree,
  saveSampleShare,
  GetTestShareTreeByCode,
} from "@/api/base";
import {
  getTestStandardAttributeSelect,
  GetTestShareTree,
  GetPrintDownLoadByIautoid,
  getApplyTicket,
  CommonPrintDownLoad,
  GetSampleShareAttributes,
} from "@/api/check";
import MultSelect from "@/components/MultSelect";
import SelectTwo from "@/components/SelectTwo";
import FixedSelect from "@/components/FixedSelect";
import PickerUnitOne from "@/components/PickerUnitOne";
import { to } from "@/utils";
let scan = null;
export default {
  name: "sampleSeparation",
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Notify.name]: Notify,
    [Col.name]: Col,
    [Row.name]: Row,
    [Icon.name]: Icon,
    [Tag.name]: Tag,
    [Button.name]: Button,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Cascader.name]: Cascader,
    [Popup.name]: Popup,
    MultSelect,
    SelectTwo,
    FixedSelect,
    PickerUnitOne,
		HPDFViewer
  },
  data() {
    return {
      token: "",
      checkType: "1", //检验类型
      checkTypeArr: [
        { value: 1, text: "样品检验" },
        { value: 2, text: "稳定性检验" },
      ],
			pdfUrl: '',
      showSamplePicker: false, //分样 树
      sampleValue: "",
      sampleName: "",
      sampleArr: [],
      sampleNames: {
        text: "name",
        value: "code",
      },
      treeNode: "",
      materialCode: "",
      batchID: "",
      testID: "",
      showPdf: false, //预览请验单
      pdfh5: null,
      failMsg: "", //
      showAcceptBtn: true, //请验单 确认按钮
      checkList: [], //检验list
      sampleList: [], //留样list
      showPicker: false, //班组弹窗
      classArr: [], //班组
      ClassName: "",
      ClassCode: "",
      WeightTotalOne: "", //数量单位
      WeightUnitOneCode: "",
      WeightUnitOneName: "",
      WeightTotalOne1: "",
      WeightUnitOneCode1: "",
      WeightUnitOneName1: "",

      standardBaseOn: "",
      testStandard: "",
      showItem: false,
      sampleAttributes: [],
      columns: [],
      checkedAll: false,
      sampleAttributesName: "",
      sampleAttributestr: "",
      ClassUserID: "",
      ClassUserName: "",
      scanShow: false,
      scanType: "",
      scanObj: {},
      timer: null,
      domain: "",
    };
  },
  watch: {
    testID(val) {
      if (val) {
        this.getBtnShow();
        this.getTestDataByTestId();
      }
    },
    testStandard() {
      this.getStandardItem();
    },
    checkType(val) {
      if (val) {
        this.getTestShareTree();
      }
    },
  },
  mounted() {
    this.token = localStorage.getItem("tokenKey");
    this.domain = localStorage.getItem("domainKey");
    this.getUnitCode(); //获取单位list
    this.getTestShareTree(); //获取分样树
    this.getClassTree(); //班组信息
  },
  methods: {
    clickLeft() {
      if (scan && scan != "") {
        scan.close();
      }
      this.$router.replace({ name: "home" });
    },
    updataSampleAttributesName(val) {
      this.sampleAttributesName = val;
    },
    getStandardItem() {
      var params = {
        queryModel: { Token: this.token, code: this.testStandard },
      };
      getTestStandardAttributeSelect(params)
        .then((response) => {
          this.sampleAttributes = [];
          this.sampleAttributesName = "";
          this.columns = response.Result;
        })
        .catch(() => {});
    },
    getTestShareTree() {
      var params = {
        Token: this.token,
        Type: this.checkType,
      };
      GetTestShareTree(params)
        .then((response) => {
          this.sampleArr = response.Result;
        })
        .catch(() => {});
    },
    onSampleFinish({ selectedOptions }) {
      this.showSamplePicker = false;
      var len = selectedOptions.length;
      var toDetail = selectedOptions[len - 1];
      this.treeNode = toDetail;
      this.materialCode = toDetail.materialCode;
      this.batchID = toDetail.batchID;
      this.testID = toDetail.code;
      this.sampleName = toDetail.name;
    },
    async getReportId(id) {
      var that = this;
      var queryParams = {
        pageModel: {
          Search: [this.materialName, id],
          Token: this.token,
        },
      };
      const [err, res] = await to(getReportId(queryParams));
      if (err) return;
      var dataArr = res.Result;
      if (dataArr.length > 0) {
        dataArr.map((item) => {
          item.text = item.testID;
          item.value = item.testID;
        });
      }
      if (this.scanObj) {
        this.testID = this.scanObj.testID;
      }
      this.testArr = dataArr;
    },
    getBtnShow() {
      var params = {
        iautoid: this.treeNode.iautoid,
        Module: "3",
        Token: this.token,
      };
      GetPrintDownLoadByIautoid(params)
        .then((response) => {
          if (response.Result == "1") {
            this.showAcceptBtn = false;
          } else {
            this.showAcceptBtn = true;
          }
        })
        .catch(() => {});
    },
    confirmReceipt() {
      var params = {
        iautoid: this.treeNode.iautoid,
        Title: this.treeNode.name,
        Module: "3",
        OperationType: "确认接收",
        UserId: getUsercode("usercodeKey"),
        Token: this.token,
      };
      CommonPrintDownLoad(params)
        .then((response) => {
          this.showAcceptBtn = false;
        })
        .catch(() => {});
    },
    checkPdfForm() {
      
      var result = {
        Token: this.token,
        iautoid: this.treeNode.iautoid,
        Tickets: [
          { code: "MaterialName", name: "名称", value: "", group: "" },
          { code: "MaterialCode", name: "物料编号", value: "", group: "" },
          { code: "Origin", name: "单位", value: "", group: "" },
          { code: "OriginType", name: "供应类型", value: "", group: "" },
          { code: "TestID", name: "编号", value: "", group: "" },
          { code: "BatchID", name: "批号", value: "", group: "" },
          { code: "Standard", name: "规格", value: "", group: "" },
          { code: "DeptmentName", name: "请验部门", value: "", group: "" },
          { code: "Total", name: "数量", value: "", group: "" },
          { code: "ApplyUser", name: "申请人", value: "", group: "" },
          { code: "ApplyDate", name: "请验日期", value: "", group: "" },
          { code: "SampleUser", name: "签收人", value: "", group: "" },
          { code: "SampleDate", name: "日期", value: "", group: "" },
          { code: "TestStandard", name: "检验标准", value: "", group: "" },
          { code: "ProductDate", name: "生产日期", value: "", group: "" },
          { code: "EffectDate", name: "有效期", value: "", group: "" },
          { code: "ProducerName", name: "生产商", value: "", group: "" },
          { code: "ApplyRemarks", name: "请验类别", value: "", group: "" },
          { code: "FactoryBatchID", name: "厂家批号", value: "", group: "" },
        ],
      };
      getApplyTicket(result)
        .then((response) => {
          console.log(response);
          var path = response.Result.path;
          if (path) {
            this.failMsg = "";
						this.showPdf = true;
            this.pdfUrl = path
          } else {
            Notify({ type: "danger", message: "请验单不存在！" });
          }
        })
        .catch(() => {});
    },
    renderPdf(pdfurl) {
      this.pdfh5 = true;
      this.$nextTick(() => {
        this.pdfh5 = new Pdfh5("#PDF", {
          pdfurl,
          lazy: true,
        });
      });
    },
    getClassUserID(val) {
      this.ClassUserID = val.value;
      this.ClassUserName = val.text;
    },
    async getTestDataByTestId() {
      var that = this;
      var queryParams = {
        materialCode: this.materialCode,
        testID: this.testID,
        Token: this.token,
      };
      const [err, res] = await to(getTestDataByTestId(queryParams));
      var data = res.Result;
      this.sampleDate = data.sampleDate;
      this.samplePerson = data.sampleUserName;
      this.testStandard = data.testStandard;
      this.standardBaseOn = data.standardBaseOn;
      this.sampleTotal = data.total;
    },
    getClassTree() {
      var params = {
        pageModel: { search: [""], Token: this.token },
      };
      getInfoTree(params)
        .then((response) => {
          if (response.ErrorCode == 0) {
            var res = response.Result.rows;
            res.map((item) => {
              item.value = item.id;
              item.text = item.name;
            });
            this.classArr = res;
          }
        })
        .catch(() => {});
    },
    getClassName(val) {
      this.ClassCode = val.value;
      this.ClassName = val.text;
    },
    getWeightUnitName(val) {
      this.WeightUnitOneCode = val.value;
      this.WeightUnitOneName = val.text;
    },
    getWeightUnitName1(val) {
      this.WeightUnitOneCode1 = val.value;
      this.WeightUnitOneName1 = val.text;
    },
    async getClassTree() {
      var queryParams = { pageModel: { search: [""], Token: this.token } };
      const [err, res] = await to(getInfoTree(queryParams));
      var dataArr = res.Result.rows;
      dataArr.map((item) => {
        item.text = item.name;
        item.value = item.id;
      });
      this.classArr = dataArr;
    },
    async getUnitCode() {
      var queryParams = {
        pageModel: { Token: this.token, Search: ["UnitCode"] },
      };
      const [err, res] = await to(getDictionaryTree(queryParams));
      var result = res.Result;
      this.dowhile(result);
      this.unitTreeArr = result;
    },
    addCheckData() {
      if (this.ClassCode == "") {
        Notify({ type: "danger", message: "班组不能为空！" });
        return false;
      }
      if (this.WeightTotalOne == "" || this.WeightUnitOneCode == "") {
        Notify({ type: "danger", message: "检验数量单位不能为空！" });
        return false;
      }
      var checkObj = {
        ClassCode: this.ClassCode,
        ClassName: this.ClassName,
        WeightTotalOne: this.WeightTotalOne,
        WeightUnitOneCode: this.WeightUnitOneCode,
        WeightUnitOneName: this.WeightUnitOneName,
      };
      var isSameClass = false;
      if (this.checkList.length > 0) {
        this.checkList.map((item) => {
          if (
            item.ClassCode == checkObj.ClassCode &&
            item.WeightTotalOne == checkObj.WeightTotalOne &&
            item.WeightUnitOneCode == checkObj.WeightUnitOneCode
          ) {
            isSameClass = true;
          }
        });
      }
      if (isSameClass) {
        Notify({ type: "warning", message: "采样数据已存在" });
        return false;
      }
      this.checkList.push(checkObj);
    },
    //留样添加
    addSampleData() {
      if (this.WeightTotalOne1 == "" || this.WeightUnitOneCode1 == "") {
        Notify({ type: "danger", message: "数量单位不能为空！" });
        return false;
      }
      var checkObj = {
        WeightTotalOne: this.WeightTotalOne1,
        WeightUnitOneCode: this.WeightUnitOneCode1,
        WeightUnitOneName: this.WeightUnitOneName1,
      };
      var isSameClass = false;
      if (this.sampleList.length > 0) {
        this.checkList.map((item) => {
          if (
            item.ClassCode == checkObj.ClassCode &&
            item.WeightTotalOne == checkObj.WeightTotalOne &&
            item.WeightUnitOneCode == checkObj.WeightUnitOneCode
          ) {
            isSameClass = true;
          }
        });
      }
      if (isSameClass) {
        Notify({ type: "warning", message: "采样数据已存在" });
        return false;
      }
      this.sampleList.push(checkObj);
    },
    async saveData() {
      var that = this;
      if (this.testID == "") {
        Notify({ type: "warning", message: "分样不能为空！" });
        return false;
      }
      var newAttributes = [];
      if (this.sampleAttributesName) {
        this.sampleAttributes = JSON.parse(this.sampleAttributesName);
      }
      this.sampleAttributes.map((item) => {
        for (var i = 0; i < that.columns.length; i++) {
          if (item == that.columns[i].value) {
            newAttributes.push({
              value: that.columns[i].value,
              text: that.columns[i].text,
            });
            break;
          }
        }
      });
      if (newAttributes.length == 0) {
        Notify({ type: "warning", message: "检验项目不能为空！" });
        return false;
      }
      var queryParams = {
        Token: this.token,
        TestID: this.testID,
        SampleSharesInfos: this.checkList,
        SampleRetainedInfos: this.sampleList,
        testStandard: this.testStandard,
        attributes: newAttributes,
      };
      const [err, res] = await to(saveSampleShare(queryParams));
      if (err) return;
      Notify({ type: "success", message: "保存成功！" });
      this.checkList = [];
      this.sampleList = [];
      this.scanObj = {};
    },
    dowhile(b) {
      for (var i = 0; i < b.length; i++) {
        if (b[i].children && b[i].children.length > 0) {
          this.dowhile(b[i].children);
        } else {
          delete b[i].children;
        }
      }
    },
    delData(index) {
      this.checkList.splice(index, 1);
    },
    delData1(index) {
      this.sampleList.splice(index, 1);
    },
    onFinish({ selectedOptions }) {
      this.showPicker = false;
      var len = selectedOptions.length;
      var toDetail = selectedOptions[len - 1];
      this.ClassName = toDetail.text;
      this.ClassCode = toDetail.value;
    },
    onTreeFinish({ selectedOptions }) {
      this.showTreePicker = false;
      var len = selectedOptions.length;
      var toDetail = selectedOptions[len - 1];
      if (this.unitType == 1) {
        this.WeightUnitOneCode = toDetail.code;
        this.WeightUnitOneName = toDetail.name;
      } else if (this.unitType == 2) {
        this.PackUnitOneCode = toDetail.code;
        this.PackUnitOneName = toDetail.name;
      } else if (this.unitType == 3) {
        this.WeightUnitOneCode1 = toDetail.code;
        this.WeightUnitOneName1 = toDetail.name;
      } else if (this.unitType == 4) {
        this.PackUnitOneCode1 = toDetail.code;
        this.PackUnitOneName1 = toDetail.name;
      }
    },
    sampleHelp() {
      var that = this;
      var queryParams = {
        materialCode: this.treeNode.materialCode,
        testStandard: this.treeNode.testStandard,
        Token: this.token,
      };
      GetSampleShareAttributes(queryParams)
        .then((response) => {
          var shareDataArr = response.Result;
          // var dataArr = that.checkList;
          that.checkList = [];
          if (shareDataArr.length > 0) {
            for (var i = 0; i < shareDataArr.length; i++) {
              var dataObj = {};
              if (that.checkList.length == 0) {
                dataObj["ClassName"] = shareDataArr[i].className;
                dataObj["ClassCode"] = shareDataArr[i].classCode;
                dataObj["WeightTotalOne"] = shareDataArr[i].weight;
                dataObj["WeightUnitOneCode"] = shareDataArr[i].weightUnitCode;
                dataObj["WeightUnitOneName"] = shareDataArr[i].weightUnit;
                that.checkList.push(dataObj);
              }
              //  else {
              //   var isAdd = true;
              //   dataObj["ClassName"] = that.ClassName;
              //   dataObj["ClassCode"] = that.ClassCode;
              //   dataObj["WeightTotalOne"] = 1;
              //   dataObj["WeightUnitOneCode"] = "UnitCode-3-084";
              //   dataObj["WeightUnitOneName"] = "份";
              //   dataArr.map((v) => {
              //     if (
              //       v.ClassUserName == dataPro.ClassUserName &&
              //       v.WeightTotalOne == dataPro.WeightTotalOne &&
              //       v.WeightUnitOneCode == dataPro.WeightUnitOneCode &&
              //       v.AttributeName == dataPro.AttributeName
              //     ) {
              //       isAdd = false;
              //     }
              //   });
              //   if (isAdd) {
              //     that.checkList.push(dataObj);
              //   }
              // }
            }
          }
        })
        .catch(() => {});
    },
    openScan() {
      var that = this;
      this.scanShow = true;
      this.timer = setTimeout(that.startRecognize, 500);
    },
    startRecognize() {
      var that = this;
      this.timer = null;
      if (!window.plus) return;
      scan = new plus.barcode.Barcode("bcid");
      scan.onmarked = onmarked;
      scan.start();
      function onmarked(type, result, file) {
        switch (type) {
          case plus.barcode.QR:
            type = "QR";
            break;
          case plus.barcode.EAN13:
            type = "EAN13";
            break;
          case plus.barcode.EAN8:
            type = "EAN8";
            break;
          default:
            type = "其它" + type;
            break;
        }

        scan.close();
        that.scanShow = false;
        console.log(result);
        that.getScanType(JSON.parse(result).testID);
      }
    },
    closeModel() {
      this.scanShow = false;
      if (!window.plus) return;
      scan.close();
    },
    async getScanType(id) {
      var params = {
        TestId: id,
        Token: this.token,
      };
      const [err, res] = await to(GetTestShareTreeByCode(params));
      this.treeNode = res.Result;
      // this.materialName = "";
      this.materialCode = this.treeNode.materialCode;
      this.batchID = this.treeNode.batchID;
      this.testID = this.treeNode.code;
      this.sampleName = this.treeNode.name;
    },
  },
};
</script>

<style scoped lang="less">
.sampleSeparation {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-size: 0.34rem;
}

.item-style {
  height: calc(100% - 1rem);
  overflow: auto;
}

.readonly /deep/.van-field__body {
  background: #ddd;
}
/deep/.van-cell {
  padding: 0.2rem 0.4rem;
}
/deep/.van-field__body {
  border-radius: 2px !important;
  border: 1px solid #ddd;
}
/deep/.van-cell {
  font-size: 0.32rem;
}
.tb {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.32rem;
}
.tb th {
  background-color: #49bbef;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
}
.popup-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .popup-content__content {
    overflow: auto;
  }
}
.deviceStyle /deep/.van-cell__title {
  width: 4.6em;
}
.scan {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;

  #bcid {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 1rem;
    text-align: center;
    color: #fff;
    background: #ccc;
    font-size: 20px;
    z-index: 999;
    .closeModel {
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }
  footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    bottom: 0;
    height: 1rem;
    font-size: 20px;
    button {
      height: 100%;
      width: 100%;
      border: none;
    }
  }
}
/deep/.van-cascader__header {
  height: 1rem;
}
/deep/.van-cascader__tabs.van-tabs--line .van-tabs__wrap {
  height: 1rem;
}
</style>